<template>
  <table-form :disabled="disabled" @next="sales5Ctrl" @jump="jump">
    <template slot="title">
      <h2 class="fromDivTit">
        <div>请填写广告挂牌信息</div>
        <i
          v-if="isEdit && detailRes.step <= 9"
          class="edit-icon"
          @click="isEnabled = true"
        />
      </h2>
    </template>
    <!---->
    <div class="form-body">
      <el-form
        ref="sales5Form"
        :model="sales5Form"
        :rules="rules"
        label-width="100px"
        class="formDiv"
      >
        <el-form-item label="广告截图:" label-width="100px" :required="true">
          <Upload
            :id="id"
            :maxcount="5"
            :urls="sales5Form.advertPicPath || ''"
            tip="可上传图片(jpg/ png/ jpeg)"
            format="jpeg,jpg,png"
            :disabled="isEdit && !isEnabled"
            @getImage="getAdImage"
          />
        </el-form-item>
        <el-form-item label="广告链接:" prop="advertLinks">
          <el-input
            v-model="sales5Form.advertLinks"
            :disabled="isEdit && !isEnabled"
            type="text"
            placeholder="请输入内容"
            style="width: 493px"
          />
        </el-form-item>
        <el-form-item label="备注:" prop="advertRemark">
          <el-input
            v-model="sales5Form.remarkStep5"
            :disabled="isEdit && !isEnabled"
            :rows="5"
            type="textarea"
            placeholder="请输入内容"
            style="width: 493px"
          />
        </el-form-item>
      </el-form>
      <div v-if="jumpReason" class="jump-box">
        <div class="jump-reson">跳过原因:</div>
        <span>{{ jumpReason }}</span>
      </div>
    </div>
    <template v-if="isEdit" slot="footer">
      <div class="dialog-footer">
        <el-button
          v-if="isEnabled"
          :disabled="disabled"
          type="primary"
          @click="saveEdit"
          >保存</el-button
        >
      </div>
    </template>
  </table-form>
</template>
<script>
import Upload from "@/components/Upload/SingleImage4";
import TableForm from "../../../lease/components/tableForm";
import { saleStep5, edit } from "@/api/sale";

export default {
  components: {
    Upload,
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      disabled: true,
      isEnabled: false,
      rules: {
        advertLinks: [
          {
            required: true,
            message: "请输入正确的广告链接",
            trigger: "blur",
            pattern: /^http(s)?:\/\//,
          },
        ],
      },
      sales5Form: {
        advertPicPath: "",
        advertLinks: "",
        remarkStep5: "",
        id: "",
      },
      detailRes: {
        jumpList: [],
      },
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 5;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    sales5Form: {
      handler(newVal, oldVal) {
        var reg = /^http(s)?:\/\//;
        if (!newVal.advertLinks) return true;
        var r = newVal.advertLinks.match(reg);
        if (r != null && newVal.advertPicPath) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
  },
  async mounted() {
    if (!this.isEdit) {
      this.sales5Form = {
        advertPicPath: "",
        advertLinks: "",
        remarkStep5: "",
        id: this.id,
        stepName: "待广告挂牌",
      };
    } else {
      await this.$store.dispatch("detail/getSaleDatail", this.id);
      this.detailRes = detail;
      var detail = this.$store.state.detail.saleDetail;
      this.detailRes = detail;
      this.sales5Form = Object.assign(
        {},
        {
          advertPicPath: detail.advertPicPath,
          advertLinks: detail.advertLinks,
          remarkStep5: detail.remarkStep5,
          id: this.id,
          stepName: "待广告挂牌",
        }
      );
    }
  },
  methods: {
    getAdImage(img) {
      this.sales5Form.advertPicPath = img;
    },
    async sales5Ctrl() {
      this.sales5Form.id = this.id;
      var saleRes = await saleStep5(this.sales5Form);
      if (saleRes.code === 200) {
        this.$emit("next");
      }
    },
    async saveEdit() {
      var res = await edit(this.sales5Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = false;
      }
    },
    jump() {
      this.$emit("jump", this.sales5Form);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
